<template>
	<view class="box " @touchmove.stop.prevent="moveHandle">
	<uni-nav-bar background-color="#3286ed" :statusBar="true" :fixed='true' color="#fff" title="外出申请详情" left-icon="left"   @clickLeft="backFn"  ></uni-nav-bar>	
	<view class="">
		
	
	<view class="form ">
		<view class="top">
			<view class="item text1"> <span>{{form.applyUserName}}</span> <span>提交的外出</span></view>
			<view class="item text2"><span>安徽湿云科技集团有限公司</span></view>
			<view class="item text3"> <span v-if="">审批通过</span> </view>
		</view>
		<view class="body">
			<view class="text1"><span>审批编号</span></view>
			<view class="text2 text">{{form.serialNum}}</view>
			<view class="text1"><span>所在部门</span></view>
			<view class="text2">待获取</view>
			<view class="card">
				<view class="top">
					外出{{form.outgoingTotalTime}}小时
				</view>
				<view class="card_item">
					<u-steps    direction="column">
							<u-steps-item  title="开始时间" :desc="form.outgoingStartTime">
							<text class="slot-icon" slot="icon">开</text>
							</u-steps-item>
							<u-steps-item title="结束时间" :desc="form.outgoingEndTime">
							<text class="slot-icon" slot="icon">结</text>
							</u-steps-item>
						</u-steps>
						 
				</view>
				<view class="bottom">
					<view class="text1">
						外出事由
					</view>
					<view class="text2">
						{{form.reason}}
					</view>
				</view>
				
			</view>
			<!-- 审批标签 -->
			<view class="tag">
				<u--image   src="../../../../static/images/pass.png" width="80px" height="80px"  ></u--image>
			</view>
			
		</view>
	</view>
	<!-- 审批流程 -->
	<view class="approval">
		<view class="text">
			<span>流程</span>
		</view>
		<view class="liucheng" v-for="(item,index) in approvalList">
			<view class="liucheng_item" >
				<view class="left">
					<u-avatar shape="square" :text="item.approverName.substr(1,2)" fontSize="14" bg-color="#3496fb" ></u-avatar>
				    <view class="icon" v-if="item.typeOperation=='agree'">
				    	<u-icon  name="checkmark-circle-fill" color="#14ba82"></u-icon>
				    </view>
				<view class="center">
					<view class="text1">
						<span>发起申请</span>
					</view>
					<view class="text2">
						<span>{{item.approverName}}</span>
					</view>
				</view>
				</view>
				
				<view class="right">
					{{item.createTime}}
				</view>
				 
			</view>
			<view class="lian" v-if="index/2==0">
				<view class="liane">
					
				</view>
			</view>
		</view>
		
	</view>
	</view>
	<view class="buttom">
		<view class="kong">
			
			<view class="kong_item">
				<uni-icons color="#606266"  type="chat" size="30"  class="iconBox" style="font-size: 27px;background-color: #fff;"></uni-icons>
				<text style="font-size: 12px;padding-top: 3px;">评论</text>
			</view>
			<view class="kong_item">
				<uni-icons color="#606266"  type="more-filled" size="30"  class="iconBox" style="font-size: 27px;background-color: #fff;"></uni-icons>
				<text style="font-size: 12px;padding-top: 3px;">更多</text>
			</view>
			<view class="kong_item">
				<uni-icons color="#606266"  type="redo" size="30"  class="iconBox" style="font-size: 27px;background-color: #fff;"></uni-icons>
				<text style="font-size: 12px;padding-top: 3px;">分享</text>
			</view>
		</view>
		 <u-button @click="openPop(0)" :plain="true" :hairline="true" class="button bgc"  type="default">拒绝</u-button>
		 <u-button @click="openPop(1)"  class="button"  type="primary">同意</u-button>
		 
	</view>
	<u-popup  @close="showProp=false" :round="10"  style="height: 100vh; " :overlay="true" :closeable="true" :closeOnClickOverlay="true" :show="showProp" mode="bottom"  >
	        <view class="pop" style="height:95vh;">
	          <view class="title">
	          	<span v-if="chackIndex==1">确认同意</span>
	          	<span v-if="chackIndex==0"> 拒绝</span>
	          </view>
			  <view class="form">
			  	<u--textarea v-model="remark" placeholder="请输入内容" height="170px" border="none" ></u--textarea>
			  </view>
			  <view class="tujian">
			  	<view class="top">
			  		<view class="">
			  			<span>推荐回复</span>
			  		</view>
					<view class="icon" v-if="texshow" @click="texshow=false">
						<u-icon  name="eye" color="#bec0c2"></u-icon>
					</view>
					<view class="icon" v-if="!texshow" @click="texshow=true">
						<u-icon  name="eye-off" color="#bec0c2"></u-icon>
					</view>
			  	</view>
				<view class="body" v-if="texshow">
					<view @click="textFn(item)" v-for="(item,index) in showtext" class="text">
						<span>{{item.text}}</span> 
					</view>
				</view>
			  </view>
			  <view class="cavans">
			  	<view style="padding: 5px; border-top: #bec0c2 solid 1px;	border-bottom:#bec0c2 solid 1px ;">
			  		<view class="">
			  			<canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
			  		</view>
			  		 
			  	</view>
				<view style="color: #3c9cff; position: relative;">
					<view style="position: absolute;right: 20px;bottom: 45px;"  @click="clear">重新签名</view>
				</view>
			  </view>
			  <!-- 确认按钮 -->
			  <view class="button">
			  	<u-button @click="finish" class="button1" v-if="chackIndex==1" type="primary">确认同意</u-button>
				<u-button  class="button1" v-if="chackIndex==0" type="error">确认拒绝</u-button>
			  </view>
	        </view>
		</u-popup>
	
	</view>
</template>

<script >
	import {listOutgoingApproval,getOutgoingApproval,updategoingform} from '@/api/OA/outgoing.js'
	import {getLoginUser,getUserProfile} from '@/api/system/user.js'
	 import {getapprovalRecodeList,editapprovalRecode} from '@/api/approvaRecode.js'
	export default {
		data() {
			return {
				form:{
					
				},
				showProp:false,
				approvalList:[],
				active:0,
				chackIndex:null,
				remark:null,
				textList:[
					{text:'同意'},
					{text:'确认'},
					{text:'OK'},
					{text:'情况属实'},
					{text:'已审核'},
					{text:'好的'},
					{text:'通过'},
					{text:'已核实'},
					{text:'可以'},
				],
				rejected:[
					{text:'拒绝'},
					{text:'不批'},
					{text:'理由不充分'},
					{text:'情况不属实'},
				],
				showtext:[],
				texshow:true,
				//绘图图像
				ctx: '', 
				//路径点集合
				points: [], 
				//签名图片
				SignatureImg: '',
				overfow:false
			};
		},
		created() {
			
		},
		onLoad(e) {
			this.getoutgoingInfo(e)
			
				this.createCanvas()
			
		},
		methods:{
			// 根据id获取详情
			async getoutgoingInfo(e){
				let res=await getOutgoingApproval(e.id)
				this.form=res.data
				await this.getapprovalList()
				
			},
			// 获取审批人
			getapprovalList(){
				getapprovalRecodeList({serialNum:this.form.serialNum}).then(res=>{
					if(res){
						var arr=res.rows
						for(var i=0;i<arr.length;i++){
						  for(var j=i+1;j<arr.length;j++){
						    //如果第一个比第二个大，就交换他们两个位置
						    if( arr[i].sequence>arr[j].sequence){
						      var temp = arr[i];
						      arr[i] = arr[j];
						      arr[j] = temp;
						    }
						  }
						}
						this.approvalList=arr
						 this.active=1
						  // this.approvalList.forEach(item=>{
								// 				if(item.approvalStatus==="completed"){
								// 					this.active++
								// 				}
								// 			})
						
					}
				})
			},
			 // 打开pop
			 openPop(val){
				  this.overfow=true
				 this.chackIndex=val
				this.showProp=true 
				if(val==0){
					this.remark="拒绝"
					this.showtext=this.rejected
					
				}else{
					this.remark="同意"
					this.showtext=this.textList
				}
			 },
			 // 推荐回复
			 textFn(val){
				 this.remark=null
				 this.remark=val.text
			 },
			 //签名
			 close(){
			 				
			 			},
			  createCanvas() {
			      //创建绘图对象
			      this.ctx = uni.createCanvasContext('mycanvas', this);
			      //设置画笔样式
			      this.ctx.lineWidth = 6;
			      this.ctx.lineCap = 'round';
			      this.ctx.lineJoin = 'round';
			      },
			  touchstart(e) {
			      let startX = e.changedTouches[0].x;
			      let startY = e.changedTouches[0].y;
			      let startPoint = { X: startX, Y: startY };
			      this.points.push(startPoint);
			      //每次触摸开始，开启新的路径
			      this.ctx.beginPath();
			 			},
			 touchmove(e) {
			      let moveX = e.changedTouches[0].x;
			      let moveY = e.changedTouches[0].y;
			      let movePoint = { X: moveX, Y: moveY };
			      this.points.push(movePoint); //存点
			      let len = this.points.length;
			      if (len >= 2) {
			              this.draw(); //绘制路径
			      }
			 			},
			 touchend() {
			      this.points = [];
			 			},
			 draw() {
			      let point1 = this.points[0];
			      let point2 = this.points[1];
			      this.points.shift();
			      this.ctx.moveTo(point1.X, point1.Y);
			      this.ctx.lineTo(point2.X, point2.Y);
			      this.ctx.stroke();
			      this.ctx.draw(true);
			      },
			 clear() {
			      let that = this;
			      uni.getSystemInfo({
			              success: function(res) {
			                  let canvasw = res.windowWidth;
			                  let canvash = res.windowHeight;
			                  that.ctx.clearRect(0, 0, canvasw, canvash);
			                  that.ctx.draw(true);
			              }
			      });
			      },
			 finish() {
			      let that = this;
			      uni.canvasToTempFilePath({
					   fileType: 'png',
			          canvasId: 'mycanvas',
					 
			          success: function(res) {
						  uni.getImageInfo({
							  src:res.tempFilePath,
							  success:function(info){
							  	console.log(info,'png');
							  }
						  })
			                   //这里的res.tempFilePath就是生成的签字图片
			                  console.log(res.tempFilePath,'DAKSJ');
			          }
			      });
			 },
			// 返回
			backFn(){
				uni.navigateBack({delta:1})
			}
		}
	}
</script>

<style lang="scss">
	.box{
		
	
	
.form{
	margin-top: 5px;
	.top{
		background-color: #fff;
		padding: 10px;
		.item{
			
		}
		.text1{
			font-size: 18px;
			font-weight: 700px;
			
			
		}
		.text2{
			font-size: 14px;
			color: #bec0c2;
			padding: 3px 0;
		}
		.text3{
			font-size: 12px;
			color: #1dcf67;
			padding-top: 5px;
		}
	}
	.body{
		background-color: #fff;
		margin-top: 10px;
		margin-bottom: 10px;
		padding: 10px;
		position: relative;
		.tag{
			 position: absolute;
			 right: 0px;
			 top: 0px;
		}
			.text1{
				font-size: 14px;
				color: #bec0c2;
		       }
			   .text2{
				   font-size: 15px;
				   margin: 7px 0;
			   }
			   .text{
				   letter-spacing:0.2em
			   }
			   .card{
				   
				   height: 220px;
				   background-color: #fff;
				   
				  .top{
					 font-size: 18px;
				  }
				  .bottom{
					  padding-top: 8px;
					  .text1{
						  font-size: 13px;
						  color: #bec0c2;
					  }
					  .text2{
						  font-size: 14px;
					  }
				  }
				  
			   }
			  .card_item{
			  				 padding: 10px;
			  				 height: 120px;
			  				 border-radius: 10px;
			  				 background-color: #e8eaeb;
							/deep/.u-steps-item__wrapper[data-v-3ae6176e]{
								background-color: #e8eaeb;
							}
							/deep/.u-text__value--tips[data-v-50004b49]{
								color: #3286ed;
							}
			  			.slot-icon {
			  					width: 21px;
			  					height: 21px;
			  					background-color: #3286ed;
			  					border-radius: 100px;
			  					font-size: 12px;
			  					color: #fff;
			  					line-height: 21px;
			  					text-align: center;
			  				}	  
			  } 
	}
}
.buttom{
	background-color: #fff;
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 90px;
	padding-top: 20px;
	display: flex;
	justify-content: flex-end;
	
	.button{
		
		width: 60px;
		height: 30px;
		
	}
	/deep/.u-button{
		margin-top: 20px;
	}
	.bgc{
		background-color: #fff;
		border: #8b8b8b solid 1px
	}
	.kong{
		width: 180px;
		height: 100%;
		display: flex;
		padding: 0 6px;
		
		justify-content: space-between;
		.kong_item{
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items:center;
		}
	}
}
.approval{
	background-color: #fff;
	padding: 10px 10px;
	.text{
		padding-bottom: 15px;
		font-size: 14px;
		font-weight: 550;
	}
	.lian{
		width: 100%;
		padding: 4px 0;
		.liane{
			height: 30px;
			width: 2px;
			margin-left: 18px;
			background-color: #bec0c2;
		}
	}
	.liucheng{
		.liucheng_item{
			display: flex;
			justify-content: space-between;
			.left{
				display: flex;
				justify-content: space-between;
				position: relative;
				.icon{
					position: absolute;
					left: 32px;
					bottom: 0px;
					background-color: #fff;
					border-radius: 50%;
				}
				.center{
					padding: 0 10px;
					.text1{
						font-size: 13px;color: #bec0c2;
						padding: 1px;
					}
					.text2{
						font-size: 17px;
						padding: 1px;
						
					}
				}
			}
		}
		.right{
			
			color: #bec0c2;
		}
	}	
}
}
.hiddens{
	position: fixed;
	
}
.pop{
	
	position: relative;
	.title{
		text-align: center;
		padding-top: 5px;
		font-size: 16px;
		font-weight: 550;
	}
	.tujian{
		padding: 15px;
		.top{
			font-size: 12px;
			color: #bec0c2;
			display: flex;
			justify-content: space-between;
		}
		.body{
			display: flex;
			
			flex-wrap: wrap;
			.text{
				
				margin: 5px;
				padding: 4px 5px;
				border-radius: 2px;
				font-size: 12px;
				background-color: #ebebeb;
			}
		}
	}
	.button{
		width: 100%;
		position: absolute;
		bottom: 10px;
		text-align: center;
		.button1{
			width: 300px;
			border-radius: 10px;
			padding: 0 20px;
		}
	}
	.cavans{
		.mycanvas{
			width: 365px;
			height: 250px;
		}
	
		
		
	}
}

</style>
